<template>
  <section class="shopCart"> 
      <!-- 导航 -->
    <nav class="goback">
      <div @click="goback">
        <img src="../../assets/other/goback.png" alt="">
        <span>
          购物车
        </span>
      </div>
      <section @click="editorCart" v-if="!editorType">
        编辑
      </section>
      <section @click="editorCart" v-if="editorType">
        完成
      </section>
    </nav>

    <!-- 商品区 -->
    <section class="cartGoods">
      <!-- 商品 -->
      <section class="goodsSec" v-for="(goodsList,index) in goodsList" :key="index" @click="printCQ">
        <section class="noSel" v-if="!goodsList.type" @click="goodsList.type = !goodsList.type;judgeCheck(goodsList.type);" @click.stop="judgeCheck"></section>
        <section class="sel" v-if="goodsList.type" @click="goodsList.type = !goodsList.type;judgeCheck(goodsList.type);" @click.stop="judgeCheck">
          <img src="../../assets/other/sel.png" alt="">
        </section>
        <section class="goods">
          <section class="goodsImg">
            <img v-bind:src="goodsList.img" alt="">
          </section>
          <section class="goods_sec">
            <p class="goodsTit">
              {{goodsList.tit}}
            </p>
            <p class="goodsPrice">
              {{(goodsList.price/100*goodsList.num).toFixed(2) | currency}}
            </p>
            <section class="goodsNum">
              <span class="sub" @click="minus(goodsList.cartId)">
                -
              </span>
              <span class="num">
                {{goodsList.num>0?goodsList.num=goodsList.num:goodsList.num=1}}
              </span>
              <span class="add" @click="plus(goodsList.cartId)">
                +
              </span>
            </section>
          </section>
        </section>
      </section>            
      <section v-if="goodsList.length<=0">
        暂无商品
      </section>
    </section>
    <!-- 推荐 -->
    <section class="recom">
      <img src="../../assets/other/tj.png" alt="" class="recomImg">
      <!-- <section class="recomGoods"              
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        infinite-scroll-immediate-check ="loading"
      > -->
      <section class="recomGoods">
        <section class="recomGoodsList" v-for="recomList in recomList" :key="recomList.id" @click="seeSec(recomList.id)">
          <section class="_img">
            <img v-bind:src="recomList.thumbnail" alt="">
          </section>
          <section class="_sec">
            <p class="_title">
              {{recomList.name}}
            </p>
            <p class="_price">
              {{(recomList.defaultPrice/100).toFixed(2) | currency}}
            </p>
          </section>
        </section>  
      </section>
      <!-- 加载动画 -->
      <!-- <loadmore  v-show="loadingDom"></loadmore> -->
    </section>
    <!-- 底部 -->
      <!-- 结算 -->
    <section class="settle" v-if="!editorType">
      <section class="sel_box" @click="checkAll">
        <section class="noSel" v-if="!checkType"></section>
        <section class="sel" v-if="checkType">
          <img src="../../assets/other/sel.png" alt="">
        </section>
        <span class="allIn" >
          全选
        </span>
      </section>
      <section class="sumPrice">
        合计:{{price.toFixed(2) | currency}}
      </section>
      <section class="settleBtn" @click="submitToCart">
        去结算
      </section>
    </section>
      <!-- 编辑 -->
    <section class="editor" v-if="editorType">
      <section class="e_price">
        <!-- {{336 | currency}} -->
      </section>
      <section class="sel_box e_sel"  @click="checkAll">
        <section class="noSel" v-if="!checkType"></section>
        <section class="sel" v-if="checkType">
          <img src="../../assets/other/sel.png" alt="">
        </section>
        <span class="allIn">
          全选
        </span>
      </section>
      <section class="e_del" @click=deleteGoods>
        删除
      </section>
    </section>
  </section>
</template>
<script>
  import goback from '../../components/goback' // 底部导航栏
  // import loadmore from '../../components/loadmore' // 底部导航栏
  import { userInfoGet } from '../../libs/publicMethod'  // 获取用户信息
  import { queryMyCart, product, joinCart, RemoveCart, createOrder } from '../../libs/interface' // 获取接口
  export default {
    // components: { goback, loadmore, queryMyCart, product, joinCart, RemoveCart, createOrder },
    components: { goback, queryMyCart, product, joinCart, RemoveCart, createOrder },
    data (){
      return {
        userInfo: userInfoGet(), // 用户信息
        editorType: false, // 编辑状态
        checkType: false, // 全选状态
        delAllMoney: 0,
        goodsList: [], // 购物车
        recomList: [], // 推荐商品
        // loading: false, // 加载更多
        // loadingDom: false, // 加载动画
        offset: 0, // 加载条数
        selectedGoods: [], // 选中的商品
        price: 0 // 总价
      }
    },
    mounted(){
      document.body.style.paddingBottom = '50px'
      this.queryCart();
      this.loadGoods();
      this.judgeCheck(true)
    },
    methods: {   
      //  返回上一页
      goback () {
        let vm = this
        vm.$router.back(-1)
      },
      // 查询我的购物车
      queryCart () {
        let vm = this;
        let params = {
          memberId: vm.userInfo.id
        }
        queryMyCart(params, (data)=>{
          if(data.code == 1) {
            vm.goodsList = data.payload;
          }
        })
      },
      // 加载商品
      loadGoods () {
        let vm = this
        let params = {
          productType: -1,
          runType: -1,
          limit: 4,
          offset: Math.round(Math.random() * 30),
          likeStr: '',
          sidx: 'createTime',
          sord: 'DESC'
        }
        product(params,(data)=>{       
          if (data.code == 1 && data.payload.length>0) {
            vm.recomList = data.payload
          }else{
            vm.$toast('暂未请求到数据,请稍后再试')
          }
        })
      },
      // 上拉加载更多
      // loadMore() {
      //   let vm = this
      //   vm.loading = true;
      //   vm.loadingDom = true;
      //   vm.offset=10 + vm.offset;
      //   let params = {
      //     productType: -1,
      //     runType: 1,
      //     limit: 10,
      //     offset: vm.offset,
      //     likeStr: '',
      //     sidx: 'createTime',
      //     sord: 'DESC'
      //   }
      //   product(params,(data)=>{       
      //     if (data.code == 1 && data.payload.length>0) {
      //       vm.$nextTick(()=>{
      //         data.payload.forEach((item) => {              
      //           vm.recomList.push(item);
      //         })
      //       })
      //       vm.loading = false;
      //     }else{
      //       this.loading = true;
      //       vm.offset-=10;
      //       vm.$toast('暂未请求到数据,请稍后再试')
      //     }
      //     vm.loadingDom = false;
      //   })
      // },
      // 跳转详情页
      seeSec (val) {
        // sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
        sessionStorage.removeItem('coupon')
        this.$router.push('/goods/'+val)
      },
      // 编辑
      editorCart () {
        let vm = this;
        vm.editorType = ! vm.editorType
      },
      // 
      printCQ () {
      },
      // 全选
      checkAll () {
        let vm = this;
        vm.checkType = ! vm.checkType   
        if (vm.checkType) {
          vm.goodsList.forEach( element =>{
            element.type = true
          })
        } else {          
          vm.goodsList.forEach( element =>{
            element.type = false
            if (element.type) {
              vm.checkType = true
            } else {              
              vm.checkType = false
            }
          })
        }        
      },
      // 判断是否全选
      judgeCheck (val) {
        let vm = this
        if(!val){
          vm.checkType = false;
          return false;
        }
        for(let i = 0; i<vm.goodsList.length;i++){
          if (!vm.goodsList[i].type) {
            vm.checkType = false;
            break;
          } else {
            vm.checkType = true;
          }
        }
      },
      //删除已选商品
      deleteGoods () {
        let vm = this
        let arr = []
        vm.goodsList.forEach(element => {
          if (element.type) {
            arr.push({ cartId: element.cartId, num: element.num })
          }
        })
        for (let selectedGoods of arr) {
          let params = {
            cartId: selectedGoods.cartId,
            num: selectedGoods.num,
          }
          RemoveCart(params, (data) => {
            if (data.code === 1) {
              vm.goodsList.forEach(function(elem, index) {
                  if (elem.cartId === params.cartId) {
                    vm.goodsList.splice(index,1)
                  }
              })
            } else vm.$toast('系统异常')
          })
        }
      },
      // 减
      minus (id) {
        let vm = this
        for (let elem of vm.goodsList) {
          if (elem.cartId === id) {
            if (elem.num <= 1) {
              return
            }
            let params = {
              cartId: elem.cartId,
              num: 1,
            }
            RemoveCart(params, (data) => {
              if (data.code === 1) {
                elem.num--
              } else {
                vm.$toast('系统异常')
              }
            })
          }
        }
      },
      // 加
      plus (id) {
        let vm = this
        for (let elem of vm.goodsList) {
          if (elem.cartId === id) {
            let params = {
              memberId: vm.userInfo.id,
              skuId: elem.skuId,
              num: 1,
            }
            joinCart(params, (data) => {
              if (data.code === 1) {
                elem.num++
              } else {
                vm.$toast('系统异常')
              }
            })
          }
        }
      },
      // 去结算
      submitToCart () {
        let vm = this
        let arr = []
        vm.goodsList.forEach(elem => {
          if (elem.type) {
            arr.push(elem.cartId)
          }
        })
        if (arr.length > 0) {
          let params = {
            cartIds: arr,
            memberId: vm.userInfo.id,
          }
          createOrder(params, (data) => {
            if (data.code === 1) {
              sessionStorage.setItem('points', JSON.stringify({ points: true }))
              // vm.$router.push('/order/' + data.payload)
              location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2Forder%2F' + data.payload + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            } else vm.$toast(data.msg)
          })
        }
      },
    },
    computed: {
      totalPrice: function () {
        let total = 0
        this.goodsList.forEach(element => {
          if (element.type) {
            total += element.price / 100 * element.num
          }
        })
        return total
      },
    },
    watch: {
      totalPrice: function () {
        this.price = this.totalPrice
      },
    },
    filters: {
      currency: function (value) {
        if (!value) return ''
        return '￥' + value
      }
    }
  }
</script>
<style scoped>
/* 导航 */
.goback{
  position: fixed;
  width: 100%;
  top: 0;
  padding: .5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
}
.goback img{
  padding-right: .5rem;
  height: 1rem;
}
.goback div{   
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
.goback section{
  margin-right: 1rem;
  font-size:0.8rem;
  color:rgba(102,102,102,1);
}
/* 商品区 */
.cartGoods{
  background-color:rgba(255,255,255,1);
  padding: .7rem .5rem;
  padding-top: 3rem;
}
.sel{
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2.4rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.sel img{
  width: 100%;
  height: 100%;
}
.noSel{
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 2.4rem;
  border: .2rem solid rgba(153,153,153,1);
  box-sizing: border-box;
}
.goods{
  width: 90%;
  box-sizing: border-box;
  border-radius:.5rem;
  overflow: hidden;
  box-shadow:1px 1px 8px rgba(185,182,168,0.5);
}
.goods,.goodsSec{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
.goodsSec{
  margin-bottom: 1rem;
}
.goodsImg{
  width: 49.8%;
  height: 7rem;
}
.goods_sec{
  width: 50.2%;
}
.goodsImg img{
  height: 100%;
  width: 100%;
}
.goods_sec{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  align-items: left;
  padding: .5rem;
  box-sizing: border-box;
  height: 100%;
}
.goodsTit{
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goodsPrice{
  font-size:1.08rem;
  margin: .5rem 0;
  color:rgba(242,48,48,1);
}
.goodsNum{
  width: 90%;
  text-align: right;
}
.sub,.add,.num{

  padding:.2rem .6rem;
}
.num{
  background-color: rgba(246,246,246,1);
}
/* 推荐商品 */
.recomImg{
  width:40%;
  margin: .5rem 0;
}
.recomGoods{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.recomGoodsList{
  width: 47.5%;
  -moz-box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  -webkit-box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  border-radius: .8rem;
  overflow: hidden;
  margin-left: 1.5%;
  margin-bottom: .5rem;
}
.recomGoodsList ._img{
  width: 100%;
  height: 8rem;
}
.recomGoodsList ._img img{
  width: 100%;
  height: 100%;
}
.recomGoodsList ._title{
  font-size: .9rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recomGoodsList ._sec{
  padding: .5rem;
}
.recomGoodsList ._price{
  text-align: left;
  padding-left: .5rem;
  font-size: 1.3rem;
  color: red;
}
/* 底部 */
.settle,.editor{
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  background-color: rgba(255,255,255,1);
}
.settle,.sel_box,.editor{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.settleBtn{
  padding: .8rem 0;
  width: 26%;
  font-size: 1.2rem;
  color:rgba(255,255,255,1);
  background:linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
  box-shadow:0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
}
.sel_box{
  margin-left: 1rem;
}
.sumPrice{
  font-size: 1.2rem;
  font-weight: bold;
}
.allIn{
  margin-left: .5rem;
}
/* 编辑 */
.editor{
  padding: .5rem;
}
.e_price{
  font-size: 1.05rem;
  margin-left: 1rem;
  color:rgba(242,48,48,1);
  font-weight: bold;
}
.e_sel{
  margin-left: 20%;
}
.e_del{
  font-size: 1.05rem;
  padding: .3rem 1rem;
  color:rgba(226,35,25,1);
  border: 1px solid rgba(226,35,25,1);
  border-radius: 2rem;
}
</style>
